<template>
  <div>
    <el-button
      type="primary"
      @click="change"
    >修改</el-button>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%;"
      :row-class-name="rowClassName"
    >
      <el-table-column
        prop="name"
        label="姓名"
      >
        <template slot-scope="scope">
          <el-input
            :class="flag&&scope.row.index==1?'show':''"
            v-if="scope.row.edit"
            v-model="scope.row.name"
            placeholder="姓名"
          ></el-input>
          <span v-else>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
      >
        <template slot-scope="scope">
          <el-select
            v-if="scope.row.edit"
            v-model="scope.row.sex"
            placeholder="请选择"
          >
            <el-option
              label="男"
              value="1"
            >男</el-option>
            <el-option
              label="女"
              value="2"
            >女</el-option>
          </el-select>
          <span v-else>
            <p v-if="scope.row.sex==1">男</p>
            <p v-if="scope.row.sex==2">女</p>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.edit"
            type="text"
            size="medium"
            @click="confirmAdd(scope.row)"
          >
            <i
              class="el-icon-check"
              aria-hidden="true"
            ></i>
          </el-button>
          <div v-else>
            <el-button
              type="text"
              size="medium"
              @click="editData(scope.row)"
            >
              <i
                class="el-icon-edit"
                aria-hidden="true"
              ></i>
            </el-button>
            <el-button
              type="text"
              size="medium"
              @click="deleteData(scope.row,scope.$index)"
            >
              <i
                class="el-icon-delete"
                aria-hidden="true"
              ></i>
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      type="text"
      @click="addData"
    >添加数据</el-button>
    <el-divider></el-divider>
    <el-button @click="submitData">提交 </el-button>
  </div>

</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      tableData: [],
      flag: false,
    };
  },
  methods: {
    rowClassName({ row, rowIndex }) {
      //把每一行的索引放进row
      row.index = rowIndex;
      console.log(row);
    },
    change() {
      this.flag = !this.flag;
    },
    //添加
    addData() {
      this.tableData.push({
        edit: true,
      });
    },
    //确认添加
    confirmAdd(row) {
      row.edit = false;
    },
    //修改
    editData(row) {
      row.edit = true;
    },
    //删除
    deleteData(row, index) {
      this.tableData.splice(index, 1);
    },
    submitData() {
      alert(JSON.stringify(this.tableData));
    },
  },
};
</script>
<style>
.show /deep/ .el-input__inner {
  border: 1px solid red;
}
</style>